<!DOCTYPE html>
<html lang="zh">

<head>
    <title>{block name="title"}{$title|default=''}{if !empty($title)} · {/if}{:sysconf('site_name')}{/block}</title>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit">
    <meta name="format-detection" content="telephone=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=0.4">
    <link rel="stylesheet" href="__ROOT__/static/plugs/layui/css/layui.css?at={:date('md')}">
    <link rel="stylesheet" href="__ROOT__/static/plugs/awesome/fonts.css?at={:date('md')}">
    <link rel="stylesheet" href="__ROOT__/static/theme/css/console.css?at={:date('md')}">

</head>
<style>
    body{
        margin: 0;
        width: 100%;
        height: 100%;
        background-color: #c0c4cc;
    }
    .main{
        width: 100%;
        background: #00FFFF;
    }
    .main_c{
        width: 530px;
        min-height: 500px;
        margin: auto;
        background: #fff;
        padding: 20px 15px;
        border-radius: 10px;
    }
    .title{
        text-align: center;
        margin: 28px 0;
        color: #333;
        letter-spacing: 7px;
    }
</style>
<body >
<div class="title">
    <h1>百度集团会议室预约系统</h1>
</div>
    <div class="main_c">

        <form class="layui-form" action="">
            <div class="layui-form-item">
                <label class="layui-form-label">选择会议室</label>
                <div class="layui-input-block">
                    <select name="room_id" lay-verify="required" required>
                        <option value=""></option>
                        {foreach $room as $v}
                        <option value="{$v.id}">{$v.name}</option>
                        {/foreach}
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">预约日期</label>
                <div class="layui-input-block">
                    <input type="text" name="date" id="test1" required autocomplete="off" lay-verify="required"   class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">预约时间</label>
                <div class="layui-input-block">
                    <input type="text" name="time" id="test" required autocomplete="off" lay-verify="required"   class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">预约人</label>
                <div class="layui-input-block">
                    <input type="text" name="username"  required autocomplete="off" lay-verify="required"   class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">预约人电话</label>
                <div class="layui-input-block">
                    <input type="text" name="phone"  required autocomplete="off" lay-verify="required"   class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">会议主题</label>
                <div class="layui-input-block">
                    <input type="text" name="title"  required  lay-verify="required" autocomplete="off"    class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">预约部门</label>
                <div class="layui-input-block">
                    <input type="text" name="dep_name"    autocomplete="off"    class="layui-input">
                </div>
            </div>
            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">备注</label>
                <div class="layui-input-block">
                    <textarea name="remake" placeholder="请输入内容" class="layui-textarea"></textarea>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </form>
    </div>




<script src="__ROOT__/static/plugs/layui/layui.all.js"></script>
<script src="__ROOT__/static/plugs/require/require.js"></script>
<script src="__ROOT__/static/admin.js"></script>
<script>
    var max_font=50000
    layui.use(['form', 'upload', 'laydate'], function(){
        var form = layui.form
            ,layer = layui.layer
            ,upload = layui.upload
            ,$ = layui.jquery
            ,num=0
            ,laydate = layui.laydate
        //日期时间范围选择
        laydate.render({
            elem: '#test1'
            ,type: 'date'
        });
        //日期时间范围选择
        laydate.render({
            elem: '#test'
            ,type: 'time'
            ,range: true //或 range: '~' 来自定义分割字符
        });

        // $("#site_notice").html(txt.replace(/[\n\r]/g,'<br>'));
        form.render();
        form.on('submit(formDemo)', function(data){
            var index = layer.load();
            $.ajax({
                type: "post",
                url: '{:url("upAppointment")}',
                data: data.field,
                dataType: "json",
                success: function (res) {
                    layer.close(index)
                    layer.msg(res.info);
                   console.log(res)
                }
            })
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });

    })
    function texLength(obj, id) {
        var curr = obj.value.length;
        if (curr > max_font) {
            layer.msg('字数在' + max_font + '字以内');
        } else {
            document.getElementById(id).innerHTML = curr;
        }
    }
</script>
</body>

</html>
